<template>
  <div id="warehouseReceipt2">
    <!-- 编辑 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :fullscreen="true"
      title="入库单详情"
      :visible.sync="inComData.warehouseReceiptStatus"
      width="60%"
      :modal="false"
      class="addsiloScan"
      :destroy-on-close="true"
      @closed="closededitDialogStatus"
      @open="openeditDialogStatus"
    >
      <div style="display: flex; justify-content: space-between">
        <div style="width: 70%">
          <el-row class="titleInfo">基础信息</el-row>
          <el-form
            :model="warehouseReceipt"
            :rules="rules"
            ref="warehouseReceipt"
            label-width="150px"
            class="warehouseReceipt-ruleForm"
            style="width: 90%; padding-right: 10%"
          >
            <el-row class="mgb-10 from">
              <el-col
                :span="8"
                style="display: flex"
              >
                <el-form-item
                  style="flex: 1"
                  label="入库名称:"
                >
                  <el-input
                    placeholder=""
                    v-model="detailFrom.name"
                    disabled
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  style="flex: 1"
                  label="物料名称:"
                >
                  <el-cascader
                    style="width: 100%"
                    :props="props"
                    v-model="detailFrom.typeId"
                    :options="TpyeOptions"
                    @change="typeIdChange"
                    placeholder="请选择物料名称"
                    disabled
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                style="display: flex"
              >
                <el-form-item
                  style="flex: 1"
                  label="验收人:"
                >
                  <el-select
                    style="width: 100%"
                    v-model="detailFrom.checkName"
                    placeholder="请选择验收人"
                    disabled
                  >
                    <el-option
                      v-for="item in manOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="mgb-10 from">
              <el-col
                :span="8"
                style="display: flex"
              >
                <el-form-item
                  style="flex: 1"
                  label="仓库名称:"
                >
                  <el-select
                    style="width: 100%"
                    v-model="detailFrom.storeName"
                    placeholder="请选择仓库"
                    disabled
                  >
                    <el-option
                      v-for="item in storeOptions"
                      :key="item.id"
                      :label="item.storeName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                style="display: flex"
              >
                <el-form-item
                  style="flex: 1"
                  label="供应商:"
                >
                  <el-select
                    style="width: 100%"
                    v-model="detailFrom.supplierName"
                    placeholder="请选择供应商"
                    disabled
                  >
                    <el-option
                      v-for="item in supplierOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                style="display: flex"
              >
                <el-form-item
                  style="flex: 1"
                  label="批号:"
                >
                  <el-input
                    style="width: 100%"
                    placeholder="请输入批号"
                    disabled
                    v-model="detailFrom.batchNum"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row class="titleInfo">入库明细</el-row>
          <div
            class="detailListAddDivs"
            style="height: 75%"
          >
            <el-table
              :data="detailFrom.detailList"
              border
              style="width: 90%; margin: 0 auto"
              :header-cell-style="{ background: '#606266', color: '#fff' }"
              height="90%"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
              />
              <el-table-column
                prop="name"
                label="入库名称"
                align="center"
                min-width="200"
                show-overflow-tooltip
              >
                <template>
                  <el-input
                    style="width: 100%"
                    clearable
                    placeholder=""
                    v-model="detailFrom.name"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column
                prop="supplierName"
                label="供应商"
                align="center"
                min-width="150"
                show-overflow-tooltip
              >
                <template>
                  <el-input
                    style="width: 100%"
                    clearable
                    placeholder=""
                    v-model="detailFrom.supplierName"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column
                prop="rkrq"
                label="批号"
                align="center"
                min-width="150"
                show-overflow-tooltip
              >
                <template>
                  <el-input
                    style="width: 100%"
                    clearable
                    placeholder=""
                    v-model="detailFrom.batchNum"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="entryTime"
                label="进场时间"
                align="center"
                width="180"
              >
                <template slot-scope="scope">
                  <el-input
                    style="width: 100%"
                    clearable
                    placeholder=""
                    v-model="scope.row.entryTime"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="model"
                label="规格型号"
                align="center"
                min-width="150"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-input
                    style="width: 100%"
                    clearable
                    placeholder=""
                    v-model="scope.row.model"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="unit"
                label="计量单位"
                align="center"
                min-width="150"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-input
                    style="width: 100%"
                    clearable
                    placeholder=""
                    v-model="scope.row.unit"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="num"
                label="数量"
                align="center"
                min-width="150"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-input
                    style="width: 100%"
                    clearable
                    placeholder=""
                    v-model="scope.row.num"
                    disabled
                  ></el-input>
                </template>
                <!-- <template slot-scope="scope">
                  <span>{{ scope.row.num | numberToCurrency }}</span>
                </template> -->
              </el-table-column>
              <el-table-column
                prop="price"
                label="单价"
                align="center"
                min-width="150"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-input
                    style="width: 100%"
                    clearable
                    placeholder=""
                    v-model="scope.row.price"
                    disabled
                  ></el-input>
                </template>
                <!-- <template slot-scope="scope">
                  <span>{{ scope.row.price | numberToCurrency }}</span>
                </template> -->
              </el-table-column>
              <el-table-column
                prop="amount"
                label="金额"
                align="center"
                min-width="150"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-input
                    style="width: 100%"
                    clearable
                    placeholder=""
                    v-model="scope.row.amount"
                    disabled
                  ></el-input>
                </template>
                <!-- <template slot-scope="scope">
                  <span>{{ scope.row.amount | numberToCurrency }}</span>
                </template> -->
              </el-table-column>
              <!-- <el-table-column prop="remark" label="备注" align="center"> </el-table-column> -->
              <el-table-column
                prop="invoiceNum"
                label="发票号"
                align="center"
                min-width="150"
              >
                <template slot-scope="scope">
                  <el-input
                    style="width: 100%"
                    clearable
                    placeholder=""
                    v-model="scope.row.invoiceNum"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="checkRecord"
                label="验收情况记录"
                align="center"
                min-width="250"
              >
                <template slot-scope="scope">
                  <el-tooltip
                    :content="scope.row.checkRecord"
                    placement="bottom"
                    effect="light"
                    popper-class="tooltipPopper"
                  >
                    <span
                      style="
                        display: block;
                        width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                      "
                      >{{ scope.row.checkRecord }}</span
                    >
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                prop="qualityFile"
                label="质量证明文件"
                align="center"
                min-width="150"
              >
                <template slot-scope="scope">
                  <div
                    v-if="!scope.row.qualityList"
                    class="noFile"
                  >
                    暂无附件
                  </div>
                  <div
                    v-else
                    style="text-align: left"
                  >
                    <p
                      @click="downloadFileHandler(item)"
                      class="haveFile"
                      v-for="(item, index) in scope.row.qualityList"
                      :key="item.id"
                      title="点击下载"
                    >
                      {{ index + 1 }}、&nbsp;{{ item.name }}
                    </p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                align="center"
                width="180"
              >
                <template slot-scope="scope">
                  <el-tooltip
                    :content="scope.row.remark"
                    placement="bottom"
                    effect="light"
                    popper-class="tooltipPopper"
                  >
                    <span
                      style="
                        display: block;
                        max-width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                      "
                      >{{ scope.row.remark }}</span
                    >
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div style="text-align: center">
            <el-button
              v-if="detailFrom.permission"
              type="warning"
              @click="detailSreview(detailFrom)"
              >审核</el-button
            >

            <el-button @click="inComData.warehouseReceiptStatus = false"
              >返 回</el-button
            >
          </div>
        </div>
        <div style="width: 30%">
          <approxFlow
            ref="approxFlow"
            :steps="steps"
          ></approxFlow>
        </div>
      </div>
    </el-dialog>
    <importData
      ref="importData"
      :approxFlowData="approxFlowData"
      :templateUrl="templateUrl"
      :importDataData="importDataData"
    ></importData>
    <toExamine
      ref="toExamine"
      :steps="steps"
      :approxForm="approxForm"
      :toExamineData="toExamineData"
    ></toExamine>
  </div>
</template>

<script>
import {
  getMaterial,
  getMaterialInfoByTypeId,
} from '/src/http/backstageManage/materialDispatch/materialTypeMg.js'
import { getStoreList } from '/src/http/backstageManage/materialDispatch/warehouseMg.js'
import {
  getEnableUserList,
  getNextNodeAssignWay,
  getProcessLog,
  deleteFileList,
} from '/src/http/commonApi.js'
import { getSupplierInfo } from '/src/http/backstageManage/materialDispatch/supplierMg.js'
import { updateMaterial } from '/src/http/backstageManage/materialDispatch/materialTypeMg.js'

import {
  // 执行流程
  executeTask,
  // 根据id查询入库单详情
  getStorageById,
  //启动流程 支持先保存为草稿，再启动(带上业务id)，或者直接启动(没有业务id)
  startProcess,
  // 终止流程
  terminate,
  uploadFile_info,
  downloadFile,
} from '/src/http/materialDispatch/warehouseReceipt.js'
import importData from '/src/component/assembly/importData.vue'
import approxFlow from '/src/component/assembly/approxFlow.vue'
import toExamine from '/src/component/assembly/toExamine.vue'
import download from '/src/utils/downLoad.js'
export default {
  data() {
    return {
      projectInput: '',
      renderData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      isSearch: false,
      //审批插件
      toExamineData: {
        toExamineDataStatus: false,
        isSearch: false,
      },
      detailData: {},
      approxForm: {
        //审批结果
        approveOperation: '1',
        //批复意见
        opinion: '',
      },
      steps: {},
      approxFlowData: {},
      templateUrl: '/excel/入库单导入模板.xlsx',
      importDataData: {
        importDataStatus: false,
      },
      // edit
      editTiele: '',
      editDialogStatus: false,
      ccListStaus: false,
      cclist: [],

      detailDialogStatus: false,
      editProjectIdentifyInput: '',
      editProjectInput: '',
      from: {},
      CreateTime: '',
      warehouseReceipt: {
        detailList: [
          {
            materialId: '',
            unit: '',
            num: '',
            price: '',
            amount: '',
            invoiceNum: '',
            checkRecord: '',
            qualityFile: '',
            entryTime: '',
            fileIdList: [],
          },
        ],
      },
      detailFrom: {},
      multipleSelection: [],
      // 类型
      TpyeOptions: [],
      // 人员
      manOptions: [],
      // 仓库
      storeOptions: [],
      // 供应商
      supplierOptions: [],
      // 规格型号
      specifOptions: [],
      props: { value: 'id', label: 'name' },
      //文件上传
      uploadUrl: '',
      deleteArrIds: [],
      rules: {
        name: [
          { required: true, message: '请输入入库名称', trigger: 'change' },
        ],
        typeId: [
          { required: true, message: '请选择材料类型', trigger: 'change' },
        ],
        checkId: [
          { required: true, message: '请选择验收人', trigger: 'change' },
        ],
        storeId: [{ required: true, message: '请选择仓库', trigger: 'change' }],
        supplierId: [
          { required: true, message: '请选择供应商', trigger: 'change' },
        ],
        batchNum: [
          { required: true, message: '请输入批号', trigger: 'change' },
        ],
        // materialId: [{ required: true, message: "请选择规格型号", trigger: "blur" }],
        // num: [{ required: true, message: "请输入数量", trigger: "blur" }],
        // price: [{ required: true, message: "请输入单价", trigger: "blur" }],
        // amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
        // invoiceNum: [{ required: true, message: "请输入发票号", trigger: "blur" }],
        // checkRecord: [{ required: true, message: "请输入验收情况记录", trigger: "blur" }],
        // qualityFile: [{ required: true, message: "请输入质量证明文件", trigger: "blur" }],
        // entryTime: [{ required: true, message: "请选择进场时间", trigger: "blur" }],
      },
      materialIdRules: [
        { required: true, message: '请选择规格型号', trigger: 'change' },
      ],
      numRules: [
        { required: true, message: '请输入数量', trigger: 'change' },
        { type: 'number', message: '数量必须为数字值' },
      ],
      priceRules: [
        { required: true, message: '请输入单价', trigger: 'change' },
        { type: 'number', message: '单价必须为数字值' },
      ],
      amountRules: [
        { required: true, message: '请输入金额', trigger: 'change' },
        { type: 'number', message: '金额必须为数字值' },
      ],
      invoiceNumRules: [
        { required: true, message: '请输入发票号', trigger: 'change' },
        { min: 8, max: 8, message: '请输入8位数发票号', trigger: 'blur' },
      ],
      entryTimeRules: [
        { required: true, message: '请选择进场时间', trigger: 'change' },
      ],
    }
  },
  props: {
    inComData: Object,
  },
  components: {
    importData,
    toExamine,
    approxFlow,
  },
  created() {},
  mounted() {
    this.getListApi()
  },

  methods: {
    refresh() {},
    //初始化
    getListApi() {
      getMaterial().then((res) => {
        if (res.code == 200) {
          this.TpyeOptions = res.data
        } else {
          this.$message.error(res.message)
        }
      })
      getEnableUserList().then((res) => {
        if (res.code == 200) {
          this.manOptions = res.data
        }
      })
      getStoreList().then((res) => {
        if (res.code == 200) {
          this.storeOptions = res.data
        }
      })
      getSupplierInfo().then((res) => {
        if (res.code == 200) {
          this.supplierOptions = res.data
        }
      })
    },

    // 新增

    toExamineStatusChange() {
      this.importDataData.importDataStatus = true
    },

    // 材料类型发生变化
    typeIdChange() {
      getMaterialInfoByTypeId({
        id: this.warehouseReceipt.typeId[
          this.warehouseReceipt.typeId.length - 1
        ],
      }).then((res) => {
        if (res.code == 200) {
          this.specifOptions = res.data
          console.log(this.specifOptions)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getType() {
      getMaterialInfoByTypeId({
        id: this.warehouseReceipt.typeId,
      }).then((res) => {
        if (res.code == 200) {
          this.specifOptions = res.data
          console.log(this.specifOptions)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 材料规格发生变化
    materialIdChange(index) {
      console.log(index)
      console.log(this.warehouseReceipt.detailList[index])

      this.specifOptions.forEach((item) => {
        if (this.warehouseReceipt.detailList[index].materialId == item.id) {
          this.warehouseReceipt.detailList[index].unit = item.unit
          this.warehouseReceipt.detailList[index].model = item.model
        }
      })
    },

    // 审核
    detailSreview(data) {
      console.log(data)
      if (data.state === 'draft') {
        this.$message({
          message: '该入库单为草稿，不能进行审批',
          type: 'warning',
        })
      } else if (!data.permission) {
        this.$message({
          message: '无审批权限',
          type: 'warning',
        })
      } else {
        this.$confirm(`确认要审核选中的【${data.name}】？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.detailData = data
            getProcessLog({ id: data.orderId }).then((res) => {
              if (res.code == 200) {
                this.toExamineData.toExamineDataStatus = true
                this.steps = res.data
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消审批',
            })
          })
      }
    },

    //查看详情
    seeDetail(data) {
      getStorageById(data).then((res) => {
        if (res.code == 200) {
          this.detailFrom = res.data
        } else {
          this.$message.error(res.message)
        }
      })
      getProcessLog({ id: data.orderId }).then((res) => {
        if (res.code == 200) {
          this.steps = res.data
          this.steps.state = this.detailFrom.state
        } else {
          this.$message.error(res.message)
        }
      })
    },

    closCcListStaus() {
      this.ccList = []
    },
    closeditDialogStatus() {
      this.specifOptions = []
      this.deleteArrIds = []
      this.ccList = []
    },

    /**接口 */

    // 接受组件传来的方法
    toExamineFun() {
      if (Object.keys(this.detailData).length > 0) {
        this.startProcess(this.detailData)
      } else {
        this.startProcess(this.multipleSelection[0])
      }
    },
    toExamineDataClean() {
      this.toExamineData = {
        toExamineDataStatus: false,
        isSearch: false,
      }
      this.approxForm = {
        //审批结果
        approveOperation: '1',
        //批复意见
        opinion: '',
      }
      // this.steps = {};
    },
    // 审批流程判别
    startProcess(data) {
      let params = {
        state: data.state,
        type: 'mlStorage',
      }
      if (this.approxForm.approveOperation === '0') {
        terminate({ id: data.id }).then((res) => {
          if (res.code == 200) {
            this.editDialogStatus = false
            this.ccListStaus = false
            this.detailDialogStatus = false
            this.toExamineData.toExamineDataStatus = false
            this.detailData = {}
            this.inComData.warehouseReceiptStatus = false
            this.$parent.workbenchTaskCountyApi()
            this.$parent.shuaxin()
            this.$message.success('终止成功')
          } else {
            this.$message.error(res.message)
          }
        })
      } else if (this.approxForm.approveOperation === '1') {
        getNextNodeAssignWay(params).then((res) => {
          if (res.code == 200) {
            if (!res.data) {
              this.NextNodeAssignWay(0, data)
            } else if (res.data.assignWay === 0 || res.data.assignWay === 2) {
              if (data.state == 'draft' || !data.state) {
                this.startNodeAssignWay(0, data)
              } else {
                this.NextNodeAssignWay(0, data)
              }
            } else if (res.data.assignWay === 1) {
              console.log(res)
            }
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },
    // 开始审批流程
    startNodeAssignWay(type, data) {
      // let params = JSON.parse(JSON.stringify(this.warehouseReceipt));
      // params.typeId = params.typeId[params.typeId.length - 1];
      if (this.deleteArrIds) {
        deleteFileList(this.deleteArrIds)
          .then((res) => {
            if (res.code == 200) {
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
      console.log(data)
      const uploadPromises = data.detailList.map((el) => {
        if (el.fileInfos) {
          return uploadFile_info(el.fileInfos).then((res) => {
            if (res.code == 200) {
              if (el.fileIdList) {
                res.data.forEach((item) => {
                  el.fileIdList.push(item.id)
                })
              } else {
                el.fileIdList = []
                res.data.forEach((item) => {
                  el.fileIdList.push(item.id)
                })
              }
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
      Promise.all(uploadPromises).then(() => {
        if (type == 0) {
          let obj = {
            assignees: [],
            biDto: data,
            ccList: this.cclist,
            opinion: [],
          }
          startProcess(obj).then((res) => {
            if (res.code == 200) {
              console.log(res)
              this.editDialogStatus = false
              this.ccListStaus = false
              this.currentPage = 1
              this.ccList = []
              this.$parent.workbenchTaskCountyApi()
              this.$parent.shuaxin()
              if (data.state) {
                this.$message.success('提交成功')
              }
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    // 继续审批流程
    NextNodeAssignWay(type, data) {
      // let params = JSON.parse(JSON.stringify(this.warehouseReceipt));
      // params.typeId = params.typeId[params.typeId.length - 1];
      console.log(type, data)
      if (type == 0) {
        let obj = {
          assignees: [],
          biDto: data,
          ccList: [],
          opinion: this.approxForm.opinion,
        }
        executeTask(obj).then((res) => {
          if (res.code == 200) {
            this.$message.success('审批成功')
            this.editDialogStatus = false
            this.ccListStaus = false
            this.detailDialogStatus = false
            this.detailData = {}
            this.toExamineData.toExamineDataStatus = false
            this.inComData.warehouseReceiptStatus = false
            this.$parent.workbenchTaskCountyApi()
            this.$parent.shuaxin()
          } else {
            this.$message.error(res.message)
            this.detailData = {}
          }
        })
      }
    },

    // 预览
    uploadPreview(file) {
      console.log('预览', file)
    },

    downloadFileHandler(item) {
      downloadFile({ path: item.path }).then((res) => {
        download.word(res, item.name)
      })
    },
    change() {
      this.$forceUpdate()
    },
    closededitDialogStatus() {},
    openeditDialogStatus() {
      this.getListApi()
      this.seeDetail(this.inComData.data)
    },
  },
}
</script>

<style lang="less" scoped>
#warehouseReceipt2 {
  width: 100%;
  margin: 0 auto;
  .el-date-editor {
    margin: 0;
  }
}
.el-date-editor {
  margin: 0 10px;
}
.warehouseReceipt-ruleForm {
  width: 80%;
  margin: 0 auto;
}
.overviewContentLeftbottom {
  position: relative;
  padding: 10px;
  border: 1px dashed #909399;
  height: 24rem;
  width: 80%;
  .shenpiPng {
    position: absolute;
    top: -30px;
    right: -60px;
    width: 100px;
    height: 100px;
  }
  .overviewContentLeftbottomTitle {
  }
}
.titleInfo {
  color: #409eff;
  margin-bottom: 10px;
}
.detailListAddDiv {
  border: 1px solid #e8e8e9;
  border-radius: 20px;
  padding: 20px;
  position: relative;
  .detailListAddDivBtn {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-form-item__content) {
  flex: 1;
}
:deep(.el-dialog__title) {
  color: #fff;
}
:deep(.el-form-item) {
  margin-bottom: 10px;
}
:deep(.el-input.is-disabled .el-input__inner) {
  color: black !important;
}
// 图片上传
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pDiv {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: 0px;
  border-radius: 4px 0 0 4px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  width: 13.7%;
}
:deep(.pSelect) {
  .el-input__inner {
    border-radius: 0 4px 4px 0;
    width: 107.5%;
  }
  .el-input__suffix {
    right: -5%;
  }
}
:deep(.el-dialog__footer) {
  text-align: center !important;
}
.dialog-Btn {
  text-align: center;
  display: inline-block;
}
.footerDiv {
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
}
</style>
